<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>1</div>
    <div class="bobo">2</div>
    <div id="bb">3</div>
    <div>4</div>
    <div>5</div>
    <script>
      //h5中提供的一个选择器
      // document.quertSelector(要选择元素)
      //万能选择器         All 获取的是一个集合  哪怕只有1个元素也会放在集合中
      //1.选择类
      var cla = document.querySelectorAll('.bobo');
      console.log(cla);
      //2.选择id
      var idt = document.querySelectorAll('#bb');
      console.log(idt);
      //3. 选择元素
      var tag = document.querySelectorAll('div');
      console.log(tag);

      //document.querySelector 他获取的是这个集合中的第一个元素
      var clas = document.querySelector('.bobo');
      console.log(clas);
    </script>
  </body>
</html>
